<template>

      <div class="log_sty" >
            <div title>请登录</div>
            <div cont>
                <van-cell-group>
                    <van-field v-model="phone" type="tel" @input='input("phone")'  maxlength="11"  placeholder="请输入手机号码"  :left-icon="require('../../assets/img/log_2.png')"  />
                </van-cell-group>
                <van-cell-group>
                    <!--开眼 eye-o  -->
                    <van-field v-model="pwd"  name="pwd" type="password" maxlength="16"   placeholder="请输入密码" @input='input("pwd")' @click-right-icon='pwd_show($event)' :left-icon="require('../../assets/img/log_3.png')"  right-icon="closed-eye" />
                </van-cell-group>
                <div class="but_sty bglog_o">
                    <van-button type="primary" @click='login'>登录</van-button> 
                </div>
                <div rgs_fot>
                    <div style="flex:1" >  <router-link to="/forget_pwd">忘记密码</router-link></div>
                    <div><router-link to="/register">注册账号</router-link></div>
                </div>
            </div>

        </div>

</template>


<script>
import log_detection from '../../assets/js/log/log.js'

export default {
data() {
    return {
        phone:'',
        pwd:'',
        pwd_status:false,//明文显示密码
        log_stauts:true,//登录按钮状态
      
    }
},
 methods: { 
                login(param) {
                  var that=this;  
                
                    if(!log_detection.login(that,param))  return


                    var that = this;
                    if(!log_detection.login(that)){
                      return
                    }


                    if(!that.log_stauts){
                      return
                    }
                    localStorage.phone="15029091032"
                    
                
                    var data={'mobile':that.phone,'passwd':that.pwd}
                 
                    
            that._API.login(data).then(res => {
               
                if(res.code==200){
 
                    localStorage.userinfo=JSON.stringify(res.data)
                    
                      this.$router.push({ name: 'home'})
                }
                 that.$toast({ message: res.msg, position: 'bottom' })
              }).catch(err => {
                console.log("err", err)
              })
             


                },
                input(param) {
                
                    var that = this;

                  if(!log_detection.input_phone(that,param))  return


                    if(that.phone.length==11&&that.pwd.length>=6){

                      that.log_stauts=true;
                    }else{
                      that.log_stauts=false;
                    }

                },
                pwd_show(elem) {

                    if (elem.target.classList[0] != 'van-icon') return

                    this.pwd_status ? this.pwd_status = false : this.pwd_status = true

                    if (this.pwd_status) {

                        document.getElementsByName("pwd")[0].type = "text"
                        elem.target.classList = "van-icon van-icon-eye-o"
                    } else {
                        document.getElementsByName("pwd")[0].type = "password"
                        elem.target.classList = "van-icon van-icon-closed-eye"
                    }


                }




            }
}
</script>


<style lang="scss" scoped >



    .log_sty{    position: fixed;  margin: 30% auto;left: 0;right: 0;  top: 0;  bottom: 0;width: 90%;}
    .log_sty [title]{text-align: center;font-size: 1.5rem;color: white;margin-bottom: 1rem}
    .log_sty [cont]{  border-radius: 0.5rem;padding: 1rem;  }

    .log_sty [rgs_fot]{display: flex;    margin: 1rem;}
    .log_sty [rgs_fot] div{color:#7218DD;font-size: 0.8rem}
    .but_sty{text-align: center;    margin-top: 2rem;}
    .van-icon__image{    width: 1.5em;height: 1.5rem;}
   /deep/.van-field__control, .van-field__control::-webkit-input-placeholder {color: white;}
    .bglog_g button{background: #9e9e9e;}
    .bglog_o button{background: #9113E7;}
    .but_sty button{width: 90%;border: 0;border-radius: 0.5rem;    border-radius: 2rem;}
    .van-cell-group{       background-color: #433165;    border-radius: 1.5rem;}
    .van-field {  background-color: initial;  margin: .6rem;  width: initial;border-radius: 0.05rem;border-radius: .5rem;    margin-bottom: .8rem;}
    a:visited ,a:link{color:#9113E7}
</style>
